<template>
    <div class="about">
        <el-container>
            <el-header height="60px" class="flex-bet">
                <shape-lists @canvas-add-node="addNode" />
                <div>
                    <el-button type="primary" size="mini" @click="save">保存</el-button>
                    <el-button plain size="mini">发布</el-button>
                </div>
            </el-header>
            <el-main class="mt10">
                <div class="flex-bet">
                    <!--图形添加-->
                    <!--操作区域-->
                    <div class="main" :style="mainStyle">
                        <div id="main" @dragover.prevent />
                        <!-- <div id="minimap"></div>-->
                    </div>
                    <!--交互面板-->
                    <div class="right">
                        <el-tabs type="border-card" v-model="tabPosition">
                            <el-tab-pane
                                disabled
                                :label="
                                    currentSelectType === 'node'
                                        ? '节点属性'
                                        : '节点连接线'
                                "
                                name="node"
                            >
                                <NodeAttribute
                                    :onChange="
                                        (key, val) => {
                                            onItemCfgChange(key, val)
                                        }
                                    "
                                    :config="config"
                                    v-if="
                                        tabPosition === 'node' &&
                                        currentSelectType === 'node'
                                    "
                                />
                                <EdgeAttribute
                                    :onChange="
                                        (key, val) => {
                                            onItemCfgChange(key, val)
                                        }
                                    "
                                    :config="config"
                                    v-else-if="
                                        tabPosition === 'node' &&
                                        currentSelectType === 'edge'
                                    "
                                />
                            </el-tab-pane>
                            <el-tab-pane label="流程属性" name="flow">
                                <FlowAttribute :flowData="flowData" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import ShapeLists from './component/ShapeLists'
import events from '../assets/js/event'
import NodeAttribute from './component/panel/NodeAttribute'
import init from '../assets/js/init'
import FlowAttribute from '@/views/component/panel/FlowAttribute'
import EdgeAttribute from '@/views/component/panel/EdgeAttribute'

export default {
    name: 'About',
    components: {
        EdgeAttribute,
        FlowAttribute,
        NodeAttribute,
        ShapeLists
    },
    data () {
        return {
            tabPosition: 'flow',
            flowData: {
                remind: [
                    {
                        label: '接收代办事宜',
                        checked: false
                    },
                    {
                        label: '使用订单接收代办事宜',
                        checked: false
                    },
                    {
                        label: '使用企业微信接收代办事宜',
                        checked: false
                    }
                ],
                recall: true,
                press: false
            },
            item: {
                name: 1
            },
            highLight: {
                graph: {},
                undo: false,
                redo: false
            },
            // 保存线条样式
            lineStyle: {
                type: 'line',
                width: 1
            },
            label: '',
            labelCfg: {
                fontSize: 12,
                fill: '#fff'
            },
            node: {
                fill: '',
                lineDash: 'none',
                borderColor: '',
                width: 160,
                height: 60,
                shape: 'rect-node'
            },
            headVisible: false,
            configVisible: false,
            config: {},
            tooltip: '',
            top: 0,
            left: 0,
            canvasOffset: {
                x: 0,
                y: 0
            },
            currentSelectType: '', // 当前选中的是 节点node 还是 边edge
            height: 800
        }
    },
    computed: {
        mainStyle () {
            return {
                width: document.body.clientWidth * 0.65 + 'px',
                height:
                    document.documentElement.clientHeight * 0.8 + 'px' ||
                    document.body.clientHeight * 0.8 + 'px'
            }
        }
    },
    mounted () {
        // 创建画布
        this.$nextTick(() => {
            this.createGraphic()
            this.initGraphEvent()
            this.getData()
        })
    },
    methods: {
        onItemCfgChange (key, value) {
            let select = null
            if (this.currentSelectType === 'node') {
                select = this.graph.findAllByState('node', 'nodeState:selected')
            } else {
                select = this.graph.findAllByState('edge', 'edgeState:selected')
            }
            if (select && select.length > 0) {
                const item = select[0]

                console.log(item)
                this.graph.updateItem(
                    item,
                    { label: value }
                    // style: {
                    //   width: 100 + value.length * 7
                    // }
                )
                // this.selectedModel = { ...item.getModel() }
            }
        },
        getData () {
            // todo 模拟接口调用绑定数据
            this.conditionList = [
                {
                    title: '单行文本'
                },
                {
                    title: '多行文本'
                },
                {
                    title: '日期时间'
                },
                {
                    title: '下拉框'
                }
            ]
        },
        save () {
            const treeData = this.graph.save()
            console.log('保存后的数据结构', treeData)
        },
        createGraphic () {
            init(this)
        },
        // 初始化图事件
        initGraphEvent () {
            events(this)
        },
        // 节点添加
        addNode (e) {
            const data = {
                fzr: '',
                zh: '',
                qx: [
                    {
                        label: '单号',
                        edit: false,
                        show: false
                    },
                    {
                        label: '日期',
                        edit: false,
                        show: false
                    },
                    {
                        label: '订单明细',
                        edit: false,
                        show: false
                    }
                ],
                spyj: [
                    {
                        label: '文本意见',
                        value: ['禁用', '选填', '必填'],
                        select: ''
                    },
                    {
                        label: '手写签名',
                        value: ['未启用', '启用'],
                        select: ''
                    }
                ]
            }
            console.log('document.body.clientWidth', document.body.clientWidth)
            // if(document.body.clientWidth) {
            //
            // }
            const model = {
                label: ' ',
                data,
                // id:  Util.uniqueId(),
                // 形状
                type: e.target.dataset.shape,
                direction: 'up',
                // 坐标
                x:
                    e.clientX -
                    this.canvasOffset.x +
                    (-0.3 * document.documentElement.clientWidth + 390),
                y: e.clientY - this.canvasOffset.y - 70
            }
            this.graph.addItem('node', model)
        },
        // 边添加
        addEdge ({ source, target, sourceAnchor, targetAnchor }) {
            this.graph.addItem('edge', {
                source: source.get('id'),
                target: target.get('id'),
                sourceAnchor,
                targetAnchor,
                data: {
                    selectList: []
                }
                // label:  'edge label',
            })
        },
        // 边选中
        afterEdgeSelected (e) {
            console.log('边选中', e)
            this.config.data.conditionList = JSON.parse(
                JSON.stringify(this.conditionList)
            )
            this.currentSelectType = 'edge'
            this.tabPosition = 'node'
        },
        // 节点选中
        afterNodeSelected (e) {
            this.currentSelectType = 'node'
            this.tabPosition = 'node'
            console.log('节点选中', e)
        }
    },
    beforeDestroy () {
        this.graph.destroy()
    }
}
</script>
<style lang="scss" scoped>
@import './../assets/css/base';

.about {
    .main {
        //background: #f3f3f3;
        //width: 800px;
        //height: 600px;
        border: solid 1px #efefef;
    }

    #minimap {
        background: #2c3e50;
    }

    .el-main,
    .el-header {
        //background: #f5f5f5;
        border: solid 1px #efefef;
    }

    .right {
        /*background: #f3f3f3;*/
        min-width: 300px;
        max-width: 300px;
        height: 80vh;

        .el-tabs {
            height: 80vh;
        }

        .content {
        }
    }
}
</style>
